<script setup>
import { letterGetSentAndPubInfoByIdService } from '@/api/letter'
import { aesDecrypt } from '@/utils/crypto'
import { onMounted } from 'vue'
import { ref } from 'vue'
import LetterNavShadow from './components/LetterNavShadow.vue'
import { disableBlackTheme, formatDateTime } from './utils/tool'
disableBlackTheme()
// 获取公开信件的内容通过id:
const letterInfo = ref({
  content: '',
  title: '',
  sendTime: ''
})
const getPubInfoById = async () => {
  const queryString = window.location.search
  const urlParams = new URLSearchParams(queryString)
  const id = urlParams.get('id')
  const res = await letterGetSentAndPubInfoByIdService(id)
  if (res.data.data == null) {
    return
  }
  res.data.data.content = aesDecrypt(res.data.data.content)
  res.data.data.title = aesDecrypt(res.data.data.title)
  document.title = '给未来写封信-' + res.data.data.title
  res.data.data.sendTime = '发布时间' + formatDateTime(res.data.data.sendTime)
  letterInfo.value = res.data.data
  document.querySelector('.content').innerHTML = letterInfo.value.content
}
onMounted(() => {
  getPubInfoById()
})

const font = ref({
  color: 'rgba(0, 0, 0, .05)'
})
</script>

<template>
  <letter-nav-shadow></letter-nav-shadow>
  <el-watermark
    :font="font"
    :content="['小阿紫-给未来写封信', '未经允许，禁止转载']"
  >
    <div style="display: flex; justify-content: center">
      <div style="width: 85%">
        <div style="text-align: center; font-weight: 700; font-size: 20px">
          {{ letterInfo.title }}
        </div>
        <div style="text-align: center; margin-top: 10px; font-size: 12px">
          {{ letterInfo.sendTime }}
        </div>
        <div class="content"></div>
        <div v-if="letterInfo.content == ''">
          <a-empty></a-empty>
        </div>
      </div>
    </div>
  </el-watermark>
</template>
